import { InjectionKey, render } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import { State } from "./interfaces";
import createPersistedState from "vuex-persistedstate";

export const key: InjectionKey<Store<State>> = Symbol();
export const store = createStore<State>({
  state: {
    count: 0,
    ename: "",
    cname: "",
    envType: 0,
    version: "",
    userId: "",
    token: "",
  },
  mutations: {
    add(state) {
      state.count++;
      state.ename = "jjj";
    },
    changeUser(state, value: any) {
      state.count = 0;
      state.ename = value.get("ename");
      state.cname = value.get("cname");
      state.envType = value.get("envType");
      state.version = value.get("version");
      state.userId = value.get("userId");
      state.token = value.get("token");
    },
  },
  getters: {
    bigCount(state) {
      return state.count * 2;
    },
  },
  actions: {
    add(context) {
      context.commit("add");
    },
    changeUser(context, value: any) {
      context.commit("changeUser", value);
    },
  },
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      key: "store",
      reducer(state) {
        return { ...state };
      },
    }),
  ],
});
// 定义自己的 `useStore` 组合式函数
export function useStore() {
  return baseUseStore(key);
}
